<template>
  <div>
    <div>
      <p>
        维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.</p>
      <p>确保您的隐私不被泄露，请勿填写虚假信息。</p>
    </div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="租房合同编号">
          <el-input v-model="formInline.outOrderNo" disabled="disabled" placeholder="租房合同编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gotofinance">租房合同查询</el-button>
        </el-form-item>
        <el-form-item label="承租房间">
          <el-input v-model="formInline.roomName" disabled="disabled" placeholder="承租房间"></el-input>
        </el-form-item>
        <el-form-item label="房产编号">
          <el-input v-model="formInline.houseId" disabled="disabled" placeholder="房产编号"></el-input>
        </el-form-item>
        <el-form-item label="租客姓名">
          <el-input v-model="formInline.tenantName" disabled="disabled" placeholder="租客姓名"></el-input>
        </el-form-item>
        <el-form-item label="租客手机号">
          <el-input v-model="formInline.tenantPhone" disabled="disabled" placeholder="租客手机号"></el-input>
        </el-form-item>
        <el-form-item label="租客身份证号">
          <el-input v-model="formInline.tenantCardNo" disabled="disabled" placeholder="租客身份证号"></el-input>
        </el-form-item>
        <hr>
        <el-form-item label="金融产品选择">
          <el-select v-model="formInline.productId" @change="creditLinechange" placeholder="金融产品选择">
            <el-option :label="p.name" v-for="p in products" :value="p.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公寓承担">
          <el-col :span="7">
            <el-input v-model="formInline.businessRate"></el-input>
          </el-col>
          %
        </el-form-item>
        <el-form-item label="租客承担">
          <el-col :span="7">
            <el-input v-model="formInline.tenantRate"></el-input>
          </el-col>
          %
        </el-form-item>
        <el-form-item label="年利率">
          <el-col :span="7">
            <el-input v-model="formInline.rate" disabled="disabled"></el-input>
          </el-col>
          %
        </el-form-item>
        <el-form-item label="借款金额">
          <el-input v-model="formInline.balance" disabled="disabled" placeholder="借款金额"></el-input>
        </el-form-item>
        <el-form-item label="年一次性服务费率">
          <el-input v-model="formInline.serviceFee"></el-input>
        </el-form-item>
        %
        <el-form-item label="借款期限">
          <el-input v-model="formInline.periods" placeholder="/月"></el-input>
        </el-form-item>
        <el-form-item label="授信额度">
          <el-col :span="7">
            <el-input v-model="formInline.creditLine" disabled="disabled"></el-input>
          </el-col>
          %
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goToListCompute">金融计算器</el-button>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="formInline.textarea">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交申请</el-button>
        </el-form-item>
      </el-form>


      <el-dialog title="租房合同" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="rentInstallmentOrderNo" label="房租分期申请单号" width="150"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">选中</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="page.size"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </el-dialog>


      <el-dialog title="租房合同" :visible.sync="dialogTableVisible2">
        <el-table :data="gridData">
          <el-table-column property="id" label="id" width="150"></el-table-column>
          <el-table-column property="reLeaseCount" label="应收租金合计" width="150"></el-table-column>
          <el-table-column property="inInterestCount" label="公寓分期利息合计" width="150"></el-table-column>
          <el-table-column property="serCharge" label="服务费" width="150"></el-table-column>
          <el-table-column property="coHirerentCount" label="实收分期后租金合计" width="150"></el-table-column>
          <el-table-column property="productId" label="金融产品Id" width="150"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick2(scope.row)" type="text" size="small">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {leaseContractList, detail, listProduct, listCompute, save} from "@/api/wishu/finance/finance";

export default {
  name: "Rent_installment",
  data() {
    return {
      formInline: {},
      dialogTableVisible: false,
      gridData: [],
      page: {
        current: 1,
        size: 10,
      },
      total: 1,
      details: {
        contractId: '',
      },
      products: [],
      ComputeRentInstallment: {},
      dialogTableVisible2: false,
    }
  }, created() {
    this.getproducts();
  }, methods: {
    handleClick2(row) {
      this.formInline.reLeaseCount = row.reLeaseCount;
      this.formInline.inInterestCount = row.inInterestCount;
      this.formInline.serCharge = row.serCharge;
      this.formInline.coHirerentCount = row.coHirerentCount;
      this.formInline.periodsA = 12;
      this.dialogTableVisible2 = false;
    },
    goToListCompute() {
      this.dialogTableVisible2 = true;
      listCompute(this.formInline).then(qwe => {
        if (qwe.code == 200) {
          this.$message.success("成功");
          this.gridData = qwe.data;
        } else {
          this.$message.error("失败");
        }
      })
    },
    creditLinechange(qwea) {
      this.products.forEach(qwe => {
        if (qwea == qwe.id) {
          this.formInline.creditLine = qwe.creditLine;
          this.formInline.rate = 12;
        }
      })
    },
    getproducts() {
      listProduct().then(qwe => {
        this.products = qwe.data;
      })
    },
    handleClick(row) {
      this.details.contractId = row.cfContractId;
      detail(this.details).then(qwe => {
        this.formInline = qwe.data;
      })
      this.dialogTableVisible = false;
    },
    handleCurrentChange(page) {
      this.page.current = page;
      leaseContractList(this.page).then(qwe => {
        this.gridData = qwe.data.records;
        this.total = qwe.data.total;
      })
    },
    gotofinance() {
      this.dialogTableVisible = true;
      leaseContractList(this.page).then(qwe => {
        this.gridData = qwe.data.records;
        this.total = qwe.data.total;
      })
    },
    onSubmit() {
      save(this.formInline).then(qwe => {
        if (qwe.code == 200) {
          this.$message.success(qwe.msg);
        } else {
          this.$message.error(qwe.msg);
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
